<template>
  <div class="videos">
    <div class="carousel-photos">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item, index) in imgList" :key="index">
          <img :src="item.imgUrl" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="发布视频" name="first"
          ><div style="margin-top:10px;">
            <div class="upload-box">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将视频文件拖到此处，或<em>点击上传</em>
                </div>
                
              </el-upload>
            </div>
            <div class="videos-remind">
                <ul>
                    <li><h5>视频格式</h5>
                    <p>支持常用格式，推荐使用mp4、webm</p></li>
                    <li><h5>视频大小</h5>
                    <p>视频文件大小不超过16G，时长在60分钟以内</p></li>
                    <li><h5>视频分辨率</h5>
                    <p>分辨率为720p（1280x720）及以上</p></li>
                </ul>
            </div>
          </div></el-tab-pane
        >
        <el-tab-pane label="发布图文" name="second"><div style="margin-top:10px;">
            <div class="upload-box">
              <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将图片文件拖到此处，或<em>点击上传</em>
                </div>
                
              </el-upload>
            </div>
            <div class="videos-remind">
                <ul>
                    <li><h5>图片格式</h5>
                    <p>支持常用图片格式，暂不支持gif格式</p></li>
                    <li><h5>图片大小</h5>
                    <p>图片大小不超过50MB</p></li>
                    <li><h5>图片比例</h5>
                    <p>图文的宽高比建议不超过1:2</p></li>
                </ul>
            </div>
          </div></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      imgList: [
        {
          imgUrl:
            "https://lf6-webcastcdn-tos.douyinstatic.com/obj/webcast/441f782e9fb76219d2d67302d9d6c4d6.jpg",
        },
        {
          imgUrl:
            "https://lf6-webcastcdn-tos.douyinstatic.com/obj/webcast/62c7f6fe7462ea0599d927b64e3df52e.jpg",
        },
        {
          imgUrl:
            "	https://lf6-webcastcdn-tos.douyinstatic.com/obj/webcast/60c8b83803cd1d1fa1cd281c7f8fad64.png",
        },
        {
          imgUrl:
            "	https://lf6-webcastcdn-tos.douyinstatic.com/obj/webcast/7ddfad454d628614e1c9a08657f21f6b.png",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.videos {
  width: 98%;
  background: #fff;
  margin: auto;
  padding: 15px 20px 30px 20px;
  box-sizing: border-box;
  border-radius: 8px;
}
.carousel-photos {
  height: 140px;
  width: 100%;
  margin: 10px auto;
}
.carousel-photos img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
}
.carousel-photos .el-carousel__container {
  height: 140px;
}
.upload-box{
    width: 100%;
    height: 300px;
    background: #f4f5f5;
  border-radius: 8px;
}
.upload-box .el-upload-dragger {
  
    width: 1254px;
    height: 300px;
    background: #f4f5f5;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.upload-box .el-upload-dragger .el-icon-upload {
    font-size: 67px;
    color: #C0C4CC;
    margin: 40px 0 0px;
    line-height: 148px;
}
.videos-remind{
    margin-top: 10px;
}
.videos-remind ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.videos-remind ul li{
    width: 32%;
    height: 80px;
    border-radius: 8px;
    line-height: 1.5;
    padding: 18px 12px;
    box-sizing: border-box;
    background: #f4f5f5;
}
.videos-remind ul li p{
    color: #949494;
    font-size: 14px;
}
.upload-box .el-tabs__item {
    color: #000;
    font-size: 18px;
}
</style>
